#@adminLayout()
#define main()
<header class="content__title">
    <h1>账户管理 / 更换头像</h1>
</header>
<div class="card">
    <div class="card-block">
        <form id="avatar_upload_form" action="/admin/sys/account/uploadImg" method="POST"
              enctype="multipart/form-data">
            <input type="hidden" name="id" value="#(model.id??)"/>
            <table width="100%">
                <tr>
                    <td style="width: 30%; text-align: right; padding-right: 15px;">
                        图片文件(不能超过1024k)：
                    </td>
                    <td style="width: 30%;">
                        <input type="file" name="avatar" style="width: 90%;"/>
                    </td>
                    <td style="text-align: left;">
                        <button id="upload_btn" type="submit" class="btn btn-secondary btn--icon-text waves-effect"><i
                                class="zmdi zmdi-check"></i> 上传
                        </button>
                        <button id="backBtn" type="button" class="btn btn-secondary btn--icon-text waves-effect"><i
                                class="zmdi zmdi-arrow-back"></i> 返回
                        </button>
                    </td>
                </tr>
            </table>
        </form>
        <!-- 工作区域 -->
        <div id="working_box" class="avatar-working-box">
            <!-- 图像上传表单区域 -->
            <div class="avatar-upload-box">

            </div>

            <!-- 图像预览与裁切区域 -->
            <div class="avatar-preview-crop-box">
                <img id="jcrop_target"/>
            </div>

            <!-- 图像裁切参数保存区域 -->
            <div id="avatar_save_box" class="avatar-crop-data-save-box">
                <form id="avatar_save_form" action="/admin/sys/account/saveImg" method="post">

                    <input type="hidden" name="id" value="#(model.id??)"/>

                    <input type="hidden" id="x" name="x"/>
                    <input type="hidden" id="y" name="y"/>
                    <input type="hidden" id="width" name="width"/>
                    <input type="hidden" id="height" name="height"/>
                    <input id="avatar_save_btn" type="submit" value="保存选中区域"
                           style="padding:2px 10px; font-weight:bold;"/>
                </form>
            </div>
        </div><!-- 工作区域结束 -->

    </div>
</div>

<script type="text/javascript">
    // 使用 ajax form 上传文件
    $(document).ready(function () {
        // ajaxForm 可以是无参或者一个参数，参数只能是一个回调或json options，支持 jquery $.ajax的所有参数
        $("#avatar_upload_form").ajaxForm({
            dataType: "json",
            // 在对表单域进行序列化之前回调
            beforeSerialize: function ($form, options) {
            },
            // 这里可做一些 validator的工作，必须要返回 false 才不会提交表单
            beforeSubmit: function (formData, jqForm, options) {

                var uploadBtn = $("#upload_btn");
                uploadBtn.attr("disabled", true);
                uploadBtn.val("正在上传，请稍候...");
                return true;
            },
            success: function (ret) {
                if (ret.state === "ok") {
                    let jcropTarget = $("#jcrop_target");
                    jcropTarget.attr("src", ret.dir + "?r=" + Math.random());
                    jcropTarget.show();
                    callJcrop();
                    $("#upload_btn").hide();
                    $("#avatar_save_btn").show();
                    $("#avatar_save_box").show();
                } else {
                    showRetMsg(ret,"");
                    let uploadBtn = $("#upload_btn");
                    uploadBtn.val("上传");
                    uploadBtn.attr("disabled", false);
                }
            },
            error: function (ret) {  // 仅做为示例，只要后端是 status 200，就不会调用
                showRetMsg(ret,"");
            }
        });

        $("#avatar_save_btn").hide();
    });


    $("#backBtn").click(function () {
        kpjax("/admin/sys/account/addOrEdit?id=#(model.id??)&p=#(p)&s=#(s)");
    });

    function callJcrop() {
        $('#jcrop_target').Jcrop({
            setSelect: [30, 30, 250, 250],
            minSize: [30, 30],
            aspectRatio: 1,
            onSelect: updateCoords,
            onChange: updateCoords
        });
    }

    function updateCoords(c) {
        $('#x').val(c.x);
        $('#y').val(c.y);
        $('#width').val(c.w);
        $('#height').val(c.h);
    }

    // 使用 ajax form 提交图像裁剪坐标
    $(document).ready(function () {
        $("#avatar_save_form").ajaxForm({
            dataType: "json",
            beforeSubmit: function (formData, jqForm, options) {
            },
            success: function (ret) {
                $("#working_box").hide();
                if (ret.state === "ok") {
                    showRetMsg(ret,"");
                    $('.user_head').attr("src", "/upload/avatar/" + ret.data.avatar + "?i=" + Math.random());
                    $.pjax({
                        url: "/admin/sys/account/addOrEdit?id=#(model.id??)&p=#(p)&s=#(s)",
                        container: '#pjax-container'
                    });
                } else {
                    showMsg(3, ret.msg);
                }
            },
            error: function (ret) {
                showMsg(3, ret.msg);
            }
        });
    });
</script>
#end